<template>
	<view class="container">
		<view class="student-bg">
			<image src="../../static/img/bg2.png"></image>
		</view>
		<view class="title" v-if="isShowList">成绩通知</view>
		<view class="list" v-if="isShowList">
			
			<view class="item" v-for="(item,index) in noticeList" :key="item.Id">
				<view class="label">
					<view class="label-type">{{item.TestName}}</view>
					<view class="label-name">{{item.StudentName}}</view>
				</view>
				<view class="line"></view>
				<view class="content">
					<view class="course-item">1.英语：{{item.ChineseGrade}}分</view>
					<view class="course-item">2.数学：{{item.MathematicsGrade}}分</view>
					<view class="course-item">3.英语：{{item.EnglishGrade}}分</view>
				</view>
				<view class="bottom">
					<view class="bottom-left">总分：{{item.TotalGrade}}分</view>
					<view class="bottom-right">{{item.CreatedDateShow}}</view>
				</view>
			</view>
			
			<view class="loading" v-show="isShowLoading">
				<image class="loading-img" src="../../static/img/loading.gif"></image>
			</view>
			<view class="no-more" v-show="isShowNoMore">成绩通知就这么多了</view>
		
		</view>
		<view class="no-data" v-if="isShowNoData">暂无成绩通知</view>
	</view>
</template>

<script>
	import {myRequest} from '../../utils'
	
	export default {
		data() {
			return {
				isShowList: true,
				isLoading: false,
				currentPage: 1,
				isShowLoading: false,
				isShowNoMore: false,
				isShowNoData: false,
				noticeList: [],
				timer: null,
			}
		},
		
		onShow() {
			this.fetchData()
		},
		
		onReachBottom() {
			let that = this
			that.fetchData()
		},
		
		methods: {
			
			fetchData() {
				let that = this
				that.more = "loading"
				if (that.isShowNoMore || that.isLoading || that.isShowNoData) return
				that.isLoading = true
				that.isShowLoading = true
				
				if(that.timer != null){
					clearTimeout(that.timer);
				}
				
				that.timer = setTimeout(function(){
					
					myRequest({
						url: '/api/grade/list_by_parent',
						data: {
							p: that.currentPage
						},
					}, function(res) {
						that.isLoading = false
						that.isShowLoading = false
						
						if (res.statusCode != 200) {
							that.isShowList = false
							uni.showModal({
								title: '提示',
								content: '服务器错误，请求失败'
							})
							return
						}
					
						if (res.data.status != 0) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
							return
						}
						
						let dataList = res.data.data
						if (that.currentPage > 1 && dataList.length <= 0) {
							that.isShowNoMore = true
							return
						} else if (that.currentPage == 1 && dataList.length <= 0) {
							that.isShowList = false
							that.isShowNoData = true
							return
						}
						
						that.currentPage++
						that.noticeList = that.noticeList.concat(dataList)
					})
					
				}, 1000);
				
			}
			
		}
	}
</script>

<style>
	.student-bg {
		position: absolute;
		width: 400rpx;
		height: auto;
		right: 0;
		top: 0;
	}
	
	.container {
		width: 750rpx;
		height: auto;
		background-image: linear-gradient(#ffae00, #eee, #efefef);
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 160rpx;
		min-height: 1800rpx;
	}

	.title {
		width: 85%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 50rpx;
		padding-left: 100rpx;
		margin-bottom: 26rpx;
	}

	.list {
		width: 85%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.item {
		width: 90%;
		display: flex;
		flex-direction: column;
		padding-top: 16rpx;
	}

	.label {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}
	
	.label-type {
		flex: 1;
		font-size: 38rpx;
	}
	
	.label-name {
		flex: 1;
		font-size: 32rpx;
		display: flex;
		justify-content: flex-end;
		padding-right: 12rpx;
	}

	.line {
		width: 100%;
		height: 10rpx;
		background: #fec901;
		-webkit-box-shadow: 2rpx 4rpx 10rpx 0 rgba(202, 202, 202, 0.71);
		box-shadow: 2rpx 4rpx 10rpx 0 rgba(202, 202, 202, 0.71);
		border-radius: 4rpx;
		margin-top: 20rpx;
	}
	
	.content {
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		font-size: 34rpx;
	}
	
	.bottom {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		height: 70rpx;
		font-size: 32rpx;
	}
	
	.no-data {
		font-size: 36rpx;
		margin-top: 200rpx;
	}
	
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 30rpx;
	}
	
	.loading-img {
		width: 200rpx;
		height: 150rpx;
	}
	
	.no-more {
		padding-top: 40rpx;
		padding-bottom: 20rpx;
		font-size: 28rpx;
		color: #666666;
	}
</style>
